<template>
  <Dialog
    :title="`客户尺码`"
    top="5vh"
    :scroll="false"
    v-model:visible="visible"
    :width="'65vw'"
  >
    <div class="save-main">
      <div class="save-form">
        <div class="form">
          <VeeForm ref="veeForm" :formData="formData" :schema="schema" />
        </div>

        <div class="table">
          <Volume />
        </div>
      </div>

      <div class="save-part">
        <div class="save-button thumb" @click="save">保存尺码</div>
      </div>
    </div>
  </Dialog>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, validateRule } from "@/utils/util";
import * as yup from "yup";
import { toast } from "vue3-toastify";

import Volume from "@/components/Volume/index.vue";
import VeeForm from "@/components/VeeForm/index.vue";

import { FormData } from "@/components/VeeForm/interface";
import Dialog from "@/components/Dialog/index.vue";


const schema = yup.object().shape({
  name: yup.string().required("姓名不为空").max(20, "最多为20个字符"),
  phone: yup
    .string()
    .required("电话号码不为空")
    .matches(validateRule(`phone`), "请输入正确的手机号"),
  stature: yup.string().required("身高不为空").max(50, "不得超过50字符"),
  weight: yup.string().required("体重不为空").max(50, "不得超过50字符"),
});

const veeForm = ref<InstanceType<typeof VeeForm>>();

const visible = ref<boolean>(false);

const formData = ref<FormData>({
  name: {
    type: "input",
    label: "姓名:",
    placeholder: "请输入姓名",
  },
  phone: {
    type: "input",
    label: "电话号码:",
    placeholder: "请输入电话号码",
  },
  stature: {
    type: "input",
    label: "身高:",
    placeholder: "请输入身高",
  },
  weight: {
    type: "input",
    label: "体重:",
    placeholder: "请输入体重",
  },
});

const save = async () => {
  let valid = (await veeForm.value?.form.validate()).valid;
  if (valid === false) return toast.error("信息填写错误");
  toast.success("保存成功");
  visible.value = false;
};
const changeVisit = (status: boolean) => {
  visible.value = status;
};

defineExpose({ changeVisit });
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
